<template>
  <div>
    <MyHeader left-color="#1699a6" right-color="#67c5cf"/>
    <!-- 下方的两个 div -->
    <HeaderBottom left-color="#1699a6" right-color="#67c5cf"
                  left-text="Integrating Knowledge on Hereditary Deafness"
                  right-text="Hereditary Hearing Loss Database"/>
    <!-- 展示区域 -->
    <div class="divider" style="background-color: #dcdcdc">
      <div class="segment" style="width:300px; height:450px; background-color: white" @click="goToAbout">
        <img src="../../../static/whatIsHearingLoss.png" alt="whatIsHearingLoss" style="height: 300px; margin-top:15px">
        <h2>What is Hearing Loss?</h2>
        <p>Understand the basics of hearing loss, its types, and its impact on communication and daily life.</p>
      </div>
      <div class="segment">
        <img src="../../../static/ClassificationOfHL.png" alt="ClassificationOfHL" style="height: 300px;">
        <h2>Classification of hearing loss</h2>
        <p>Discover the different categories of hearing loss and the criteria for each classification.</p>
      </div>
      <div class="segment">
        <img src="../../../static/AboutTheDB.png" alt="AboutTheDB" style="height: 300px;">
        <h2>About the database</h2>
        <p>Dive into the details of our database and how it serves as a valuable resource for researchers and clinicians.</p>
      </div>
      <div class="segment">
        <img src="../../../static/How2UseTheWeb.png" alt="HowToUse" style="height: 300px;">
        <h2>How to use the Website</h2>
        <p>Get guidelines on navigating the database to find the information you need efficiently.</p>
      </div>
    </div>
    <!-- Related information 区域 -->
    <div class="related-info">
      <div class="relative-content">
        <h1 style="font-family: cursive; color: white">Correlation database</h1>
        <p class="relative-img">
          <img src="../../../static/other_logo/STRING_logo.png" alt="string数据库">
          <img src="../../../static/other_logo/DIDA_logo.png" alt="DIDA数据库">
          <img src="../../../static/other_logo/gnomAD_logo.png" alt="gnomAD数据库">
          <img src="../../../static/other_logo/hpo_logo.png" alt="hpo数据库">
          <img src="../../../static/other_logo/NCAD_LOGO.png" alt="NCAD数据库">
          <img src="../../../static/other_logo/OMIM_logo.png" alt="OMIM数据库">
        </p>
        <a>you can also get data from this database</a>
      </div>
    </div>
    <MyFooter color="#063f45"/>
  </div>
</template>

<script>
import MyHeader from './componet/MyHeader'
import MyFooter from './componet/MyFooter'
import HeaderBottom from './componet/HeaderBottom'
export default {
  name: 'Home',
  components: {Image, HeaderBottom, MyFooter, MyHeader},
  methods: {
    goToAbout () {
      this.$router.push({ path: '/wssoc/about' })
    }
  }
}
</script>

<style scoped>
html {
  overflow-y: scroll; /* 允许垂直滚动 */
}

body::-webkit-scrollbar {
  display: none; /* 对于Webkit浏览器，隐藏滚动条 */
}

body {
  -ms-overflow-style: none;  /* IE和Edge */
  scrollbar-width: none; /* Firefox */
}
/* 分割区域样式 */
.divider {
  height: 450px;
  margin-top: 80px; /* 与上方的间距 */
  background-color: white;
  display: flex;
  align-items: center; /* 垂直居中 */
}

/* 每个等分的样式 */
.segment {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.segment p {
  text-align: center;
}

.related-info {
  height: 300px;
  background-color: #1699a6;
  display: grid;
  place-items: center;
}
.relative-content {
  height: 280px;
  width: 1500px;
  /*background-color: #a6a9ad;*/
}
.relative-img img {
  height: 100px;
  width: 150px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>
